import React from 'react';
import { View, Text } from "@tarojs/components";
import { ThemeCompetent, GStyleSheet, DynamicColors, GDynamicValue } from '@/utils/DarkMode';
import Modal from './index';

const borderColor = new GDynamicValue('#d9d9d9', '#2e2e2e');

const dstyles = GStyleSheet.create({
  container: {
    width: '600rpx',
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderRadius: 10,
    flexDirection: 'column',
    marginBottom: 40,
  },
  inner: {
    flexDirection: 'column',
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 30,
    paddingBottom: 30,
  },
  icon: {
    marginTop: 20,
    marginBottom: 30,
  },
  title: {
    marginTop: 5,
    fontSize: 18,
    color: DynamicColors.titleTextColor,
    fontWeight: '500'
  },
  content: {
    marginTop: 10,
    paddingLeft: 20,
    paddingRight: 20,
    minHeight: 40,
    textAlign: 'center',
  },
  contentText: {
    color: DynamicColors.subTitleTextColor,
    fontSize: 14,
    textAlign: 'center',
    // lineHeight: 19,
  },
  buttons: {
    borderTopColor: borderColor,
    borderTopWidth: 1,
    borderTopStyle: 'solid',
    flexDirection: 'row',
    display: 'flex',
    width: '100%'
  },
  button: {
    flex: 1,
    height: 50,
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0)',
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 16,
    color: DynamicColors.normalTextColor,
  },
  buttonSpace: {
    width: 1,
    height: 50,
    backgroundColor: borderColor,
  },
});

export interface IButton {
  text: string;
  onClick: (index: number) => any;
  color: any;
}

export interface IDeviceStatusModalProps {
  title: string;
  visible: boolean;
  image: any;
  buttons?: IButton[];
  content: any;
}

@ThemeCompetent
class DeviceStatusModal extends React.Component<IDeviceStatusModalProps> {
  render() {
    const styles = dstyles.style;
    const { title, visible = true, image, buttons, content } = this.props;
    return (
      <Modal visible={visible} mask>
        <View style={styles.container} className='centerFlex'>
          <View style={styles.inner} className='centerFlex'>
            <View style={styles.icon} className='centerFlex'>
              {image}
            </View>
            <Text style={styles.title}>{title}</Text>
            <View style={styles.content}>
              {typeof content === 'string' ? (
                <Text style={styles.contentText}>
                  {content}
                </Text>
              ) : content}
            </View>
          </View>
          {buttons && buttons.length > 0 ? (
            <View style={styles.buttons}>
              {buttons.map((item, index) => {
                const showBorder = index !== buttons.length - 1;
                const { text, onClick, color } = item;
                return [
                  <View
                    // eslint-disable-next-line react/no-array-index-key
                    key={index}
                    className='centerFlex'
                    style={styles.button}
                    onClick={() => {
                      onClick(index);
                    }}
                  >
                    {typeof text === 'string' ? (
                      <Text
                        style={{
                          ...styles.buttonText,
                          ...(color ? { color } : null),
                        }}
                      >
                        {text}
                      </Text>
                    ) : (text)}
                  </View>,
                  showBorder ? (
                    <View
                      // eslint-disable-next-line react/no-array-index-key
                      key={`${index}border`}
                      style={styles.buttonSpace}
                    />
                  ) : null,
                ];
              })}
            </View>
          ) : null}
        </View>
      </Modal>
    );
  }
}

export default DeviceStatusModal;
